<template>
    <div id="app" v-loading.fullscreen.lock="fullscreenLoading">
    <el-container>
        <el-header style="background-color:rgb(64, 158, 255)"><headerCom></headerCom></el-header>
        <el-container>
        <el-aside  width="205px;height:100%;"><leftMenu @pageJump="pageJump" ></leftMenu></el-aside>
        <el-container>
            <el-main>
            <myTags></myTags>
                <div class="content">
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <router-view></router-view>
                        </keep-alive>
                    </transition>
                </div>

            </el-main>
        </el-container>
        </el-container>
    </el-container>
	</div>
    
</template>


<script>

import bus from '@/components/common/bus';
import leftMenu from "@/components/common/leftMenu.vue";
import headerCom from "@/components/common/headerCom.vue";
import router from '@/router/index'
import myTags from '@/components/common/myTags.vue';
export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
            fullscreenLoading: false,
        };
    },
    created() {
        var _this = this;
        bus.$on('collapse', msg => {
            this.collapse = msg;
        })

        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for(let i = 0, len = msg.length; i < len; i ++){
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        })
        
    },
    mounted() {
        var _this = this;
    },
    methods: {
        pageJump(params) {
            var _this = this;
            _this.$router.push({ path: params.path, query: params.query });
        },
        
    },
    components: { leftMenu, headerCom, myTags, bus }
};
</script>

<style>
    .el-main{
        padding:0px 0 0 0;
    }
    .el-collapse-item:last-child{
        padding-left:10px;
    }
    .el-collapse{
        border-top:0;
    }
    .breadcrumb {
        padding: 10px 0;
    }
    .el-row {
        margin-bottom: 0;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .page_block{
        border-left:1px solid #ebeef5;
        border-right:1px solid #ebeef5;
        border-bottom:1px solid #ebeef5;
    }
</style>